<template>
  <view class="message-card card-common">
    <view class="card-header">
      <view class="card-title text-ellipsis">{{ course.subject }}</view>
      <view class="card-subtitle">教师: {{ course.teacherName }}</view>
    </view>
    <view class="card-content">
      <view class="content-item flex-row">
        <text class="item-label">上课时间:</text>
        <text class="item-value">{{ course.startDatetime }}</text>
      </view>
      <view class="content-item flex-row">
        <text class="item-label">班级:</text>
        <text class="item-value">{{ course.className }}</text>
      </view>
      <view class="content-item flex-row">
        <text class="item-label">课时:</text>
        <text class="item-value">{{ course.remainingClassNum }} / {{ course.classNum }}</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'
import type { CourseItem } from '@/types/course'

defineProps<{
  course: CourseItem
}>()
</script>
<style scoped lang="scss">
@import '../styles/card.scss';
</style>
